<template>
  <by-background>
    <image src="/static/wallet-background.png" class="background-image"/>
  </by-background>

  <view id="page">
    <by-navigation-bar title="我的钱包" color="#ffffff" background="transparent" position="fixed" />

    <view class="page">
      <view class="flex-row align-center justify-between padding-lr-30">
        <view class="flex-column">
          <view class="flex-row align-center">
            <image src="/static/integral.png" class="integral-image" />
            <text class="text-36 color-white">剩余积分  {{ point }}</text>
          </view>
          <text class="text-26 color-white margin-top-30">积分可用于查看微信、电话</text>
        </view>

        <by-button type="white" width="164rpx" text="积分记录" @click="jump('/pages/integral-record/index')"/>
      </view>

      <view class="content bg-white padding-tb-40 padding-lr-30 flex-column">
        <text class="text-26 color-t1">请选择充值数量</text>

        <view class="flex-row flex-wrap">
          <view v-for="(item,index) in list" :key="index" class="recharge-item margin-right-30 margin-top-30 over-hidden" :class="{checked: item.id === rechargeItem.id}" @click="rechargeItem = item">
            <view class="flex-row flex-center color-t1 top">
              <text class="text-34 text-bold">{{ item.point }}积分</text>
            </view>
            <view class="flex-row flex-center color-grey bottom">
              <text class="text-26">￥{{ item.price }}</text>
            </view>
          </view>
        </view>

        <view v-if="rechargeItem.id" class="tips flex-row flex-center margin-top-30">
          <text class="text-26 color-t1">{{ rechargeItem.content }}</text>
        </view>
      </view>

      <by-recharge-method v-model="rechargeMethod"/>

      <view class="flex-row flex-center margin-top-40 text-24">
        <text class="color-t2">充值即代表同意</text>
        <by-view @click="jump('/pages/privacy-policy/index?type=0')">
          <text class="color-primary">《用户充值协议》</text>
        </by-view>
      </view>
    </view>
  </view>

  <by-bottom-button :page-height="pageHeight" text="立 即 充 值" font-size="32rpx" height="78rpx" bold @click="handleClick"/>
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import { jump, toast, pay, loading, getElementInfo } from '@/common/util'
import { getGoodList, getPoint, payByGood, payByGoodH5 } from '@/common/api'
import type { AnyObject, IPayType } from '@/common/types'

const rechargeItem = shallowRef<AnyObject>({})
const rechargeMethod = ref<IPayType>('WXPAY')
/* 获取充值列表*/
const list = shallowRef<AnyObject[]>([])
async function handleGetGoodList() {
  const res = await getGoodList()
  list.value = res.data.filter((item:AnyObject) => item.goodType === 'point')
  rechargeItem.value = list.value[2]
  await nextTick()
  await getPageHeight()
}
handleGetGoodList()

/* 获取剩余积分*/
const point = ref(0)
async function handlegGetPoint() {
  const res = await getPoint()
  point.value = res.data.point
}
handlegGetPoint()

/* 充值*/
const context = getCurrentInstance()
async function handleClick() {
  if (!rechargeItem.value.gno) {
    toast('请选择充值数量')
    return
  }
  if (!rechargeMethod.value) {
    toast('请选择支付方式')
    return
  }
  const load = loading('支付中...')

  /* #ifdef H5*/
  console.log(11)
  let res = await payByGoodH5({
    gno: rechargeItem.value.gno,
    channelType: 'WXPAY',
    openid: useUserStore().openid
  })
  /* #endif*/
  /* #ifdef APP-PLUS*/
  const res = await payByGood({
    gno: rechargeItem.value.gno,
    channelType: rechargeMethod.value
  })
  /* #endif*/
  const { data } = res
  await pay(data.payParams, rechargeMethod.value, context)
  handlegGetPoint()
  load.hide()
}

const pageHeight = ref(0)
async function getPageHeight() {
  const res = await getElementInfo('#page')
  pageHeight.value = res.height
}
</script>

<style scoped lang="scss">
.background-image{
  width: 100%;
  height: 458rpx;
}

.page{
  //@include position(absolute, 207rpx, 0);
  padding-top: 208rpx;
  width: 100%;

  .integral-image{
    width: 38rpx;
    height: 38rpx;
    margin-right: 16rpx;
  }

  .content{
    border-radius: 16rpx;
    margin-top: 90rpx;

    .recharge-item{
      width: 210rpx;
      background: #FFFFFF;
      border: 2rpx solid $color-border;
      border-radius: 10rpx;

      &.checked{
        border-color: #FECFB3;

        .top{
          background: #FEF0E7;
          color: #772D04;
        }

        .bottom{
          background: #FECFB3;
          color: #E55200;
        }

      }

      &:nth-child(3n){
        margin-right: 0;
      }

      .top{
        height: 102rpx;
      }

      .bottom{
        height: 46rpx;
        background: $color-border;
      }

    }

    .tips{
      height: 68rpx;
      background: #F3F3F3;
      border-radius: 10rpx;
    }

  }

}
</style>
